<template>
  <div>
    <el-form ref="form" :model="form" label-width="60px">
      <el-col :span="8">
        <el-form-item label="名字">
          <el-input v-model="form.name" placeholder="输入名字"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="账号">
          <el-input v-model="form.account" placeholder="输入账号"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" placeholder="输入昵称"></el-input>
        </el-form-item>
      </el-col>

      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
      header-align="center"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column label="Date" width="120" align="center">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        property="name"
        label="Name"
        width="120"
        align="center"
      />
      <el-table-column
        property="address"
        label="Address"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        property="accont"
        label="Accont"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="Operations" width="160" align="center">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
      <div></div>
      <el-pagination
        :current-page="pageList.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageList.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        account: "",
        nickname: "",
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          accont: "4562352845",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          accont: "4562352845",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          accont: "4562352845",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          accont: "4562352845",
        },
      ],
      pageList: {
        size: 10,
        page: 2,
        total: 0,
      },
    };
  },
  methods: {
    //编辑
    handleEdit(index, item) {
      console.log(index, item);
    },
    //删除
    handleDelete(index, item) {
      console.log(index, item);
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleSelectionChange() {},
  },
};
</script>

<style lang="less" scoped>
.demo-pagination-block {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>